<template>
	<view class="video-main u-flex-center u-col-center">
		<!-- #ifdef APP-PLUS || H5 -->
		<iframe v-if="systemConfig && systemConfig.index_video_url_list.length" :srcdoc="iframeContent" width="100%"
			height="200px" scrolling="no" frameborder="0"></iframe>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<video class="video" autoplay loop muted show-mute-btn object-fit="fill"
			:src="systemConfig.index_video_url_list[videoIndex]" @ended="ended"></video>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				videoIndex: 0,
			};
		},
		computed: {
			...mapState({
				systemConfig: state => state.init.systemConfig,
			}),
			// #ifdef APP-PLUS || H5
			iframeContent() {
				if (this.systemConfig && this.systemConfig.index_video_url_list.length) {
					const src = this.systemConfig.index_video_url_list[this.videoIndex];
					return `
				  <html>
				    <head>
				      <style>
				        .video {
				          width: 100%;
				          height: 200px;
				          object-fit: fill;
				          z-index: 0;
				        }
						body {
							margin:0;
							padding:0;
							border:none;
						}
				      </style>
				    </head>
				    <body>
				      <video class="video" autoplay="true" loop="true" muted="true" show-mute-btn="true" src="${src}" @ended="ended"></video>
				    </body>
				  </html>
				`;
				} else {
					return '';
				}
			}
			// #endif
		},
		methods: {
			ended() {
				if (this.systemConfig && this.systemConfig.index_video_url_list.length) {
					this.videoIndex = (this.videoIndex + 1) % this.systemConfig.index_video_url_list.length;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.video-main {
		padding-top: 20rpx;

		.video {
			width: 694rpx;
			height: 400rpx;
		}
	}
</style>